<template>
  <div>
    <el-row>
      <el-col :xs="24"
              :md="9"
              :lg="8">
        <el-calendar v-model="value"
                     ref="calendar">
          <slot slot="dateCell"
                slot-scope="{date, data}">
            <p :class="data.isSelected ? 'is-selected' : ''">
              {{ data.day.split('-').slice(2).join('-') }} {{ data.isSelected ? '✔️' : ''}}
            </p>
          </slot>
        </el-calendar>
      </el-col>
      <el-col :xs="24"
              :md="15"
              :lg="16">
        <div class="components-container board">
          <Kanban :key="1"
                  :list="list1"
                  :group="group"
                  class="kanban todo"
                  header-text="未开始" />
          <Kanban :key="2"
                  :list="list2"
                  :group="group"
                  class="kanban working"
                  header-text="今日进行" />
          <Kanban :key="3"
                  :list="list3"
                  :group="group"
                  class="kanban done"
                  header-text="已完成" />
        </div>
      </el-col>
    </el-row>
    <!-- <attendance :list="$refs.calendar.selectedDay"/> -->
    <attendance :list="list4" />
  </div>

</template>

<script>
import Kanban from '@/components/Kanban'
import attendance from '@/components/Attendance'
export default {
  name: '',
  components: {
    Kanban,
    attendance
  },
  data() {
    return {
      // value: new Date(),
      value: null,
      group: 'mission',
      list1: [
        { name: '会议室1', id: 1, time: '05-27' },
        { name: '会议室2', id: 2, time: '05-27' },
        { name: '库房3', id: 3, time: '05-28' },
        { name: '会议室1', id: 4, time: '05-28' },
        { name: '会议室2', id: 5, time: '05-28' },
        { name: '会议室3', id: 6, time: '05-29' }
      ],
      list2: [
        { name: '库房1', id: 1, time: '08:00' },
        { name: '库房2', id: 2, time: '10:00' },
        { name: '库房3', id: 3, time: '12:00' },
        { name: '会议室1', id: 4, time: '14:00' },
        { name: '会议室2', id: 5, time: '16:00' }
      ],
      list3: [
        { name: '库房1', id: 1, time: '05-25' },
        { name: '库房2', id: 2, time: '05-24' },
        { name: '会议室1', id: 3, time: '05-23' },
        { name: '会议室2', id: 4, time: '05-23' },
        { name: '会议室3', id: 5, time: '05-22' }
      ],
      list4: [
        { time: '08:00', name: '库房1', attendance: '6/8' },
        { time: '10:00', name: '库房2', attendance: '未开始' }
      ]
    }
  },

  created() {},

  mounted() {
    setTimeout(() => {
      console.log(this.value.getDate())
      console.log(this.$refs.calendar.realSelectedDay)
    }, 2000)
  },
  computed: {
    selectedDay() {
      return this.$refs.calendar.realSelectedDay
    },
  },

  methods: {},
  watch: {
    value: function(val) {
      if (val.getDate() === 27) {
        this.list4 = [
          { time: '10:00', name: '会议室1', attendance: '未开始' },
          { time: '14:00', name: '会议室2', attendance: '未开始' }
        ]
      }
      if (val.getDate() === 26) {
        this.list4 = [
          { time: '08:00', name: '库房1', attendance: '6/8' },
        { time: '10:00', name: '库房2', attendance: '8/8' }
        ]
      }
    },
    selectedDay: function(val){
      console.log(val)
    }
  }
}
</script>

<style lang='scss'>
.is-selected {
  color: #1989fa;
}
.board {
  width: 1000px;
  margin-left: 20px;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  align-items: flex-start;
}
.kanban {
  &.todo {
    .board-column-header {
      background: #4a9ff9;
    }
  }
  &.working {
    .board-column-header {
      background: #f9944a;
    }
  }
  &.done {
    .board-column-header {
      background: #2ac06d;
    }
  }
}
</style>